<template>
  <div>
    {{ model }}{{ name }}
    <KunkkaCollapseForm
      class="Kunkka-collapse-form"
      :collapse-name="collapseName"
      :form="form"
      :name="name"
      :model="model"
      :handle="handle"
      :rules="rules"
      :lg="8"
      :show-message="false"
      @toggleClick="toggleClick"
      @toggleSearchInput="toggleClick"
    >
      <template #gonghao>
        gonghaogonghaogonghao
      </template>
      <template v-slot:design>
        <el-col :span="24">
          <el-form-item label="自定义" prop="zdy" :rules="{required: true}">
            <el-checkbox-group v-model="model.zdy">
              <el-checkbox label="复选框 A" />
              <el-checkbox label="复选框 B" />
              <el-checkbox label="复选框 C" />
              <el-checkbox label="禁用" disabled />
              <el-checkbox label="选中且禁用" disabled />
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </template>
      <template v-slot:extra>
        123123
      </template>
    </KunkkaCollapseForm>
    <KunkkaSimpleTable
      :name="name"
      :handle="handle"
      :columns="conditions"
      :data="data"
      hasrightclickmenu
      @toggleClick="toggleClick"
    />
    <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
      <template slot="extra">
        <el-button type="primary" size="small">操作</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user" />
          用户名
        </template>
        kooriookami
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          手机号
        </template>
        18100000000
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline" />
          居住地
        </template>
        苏州市
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets" />
          备注
        </template>
        <el-tag size="small">学校</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building" />
          联系地址
        </template>
        江苏省苏州市吴中区吴中大道 1188 号
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'demo',
      collapseName: 'collapseName',
      data: [
        {
          id: '1',
          name: '张三'
        }
      ],
      form: [
        {
          label: 'name',
          prop: 'name',
          type: 'autocompleteInput',
          show: true,
          disabled: false,
          optionlist: [
            {
              cKeyname: '选项1',
              cKeynumb: '1'
            },
            {
              cKeyname: '选项2',
              cKeynumb: '2'
            }
          ]
        },
        {
          label: '工号',
          prop: 'gonghao',
          slot: 'gonghao',
          type: 'inputSearch',
          show: true,
          disabled: false,
          filter: 'integer'
        },
        {
          label: '范围',
          prop: 'range',
          type: 'daterange',
          disabled: false,
          show: true
          // width: '80px'
        },
        {
          label: '日期范围',
          prop: 'nDateRange',
          type: 'year',
          // width: '80px',
          show: true
        },
        {
          label: '月份范围',
          prop: 'nMonthRange',
          type: 'monthrange',
          show: true
        },
        {
          label: '日期时间范围',
          prop: 'nDateTimeRange',
          type: 'datetimerange',
          show: true
        },
        {
          label: '远程搜索',
          prop: 'remote',
          type: 'remotesearchSelect',
          show: true,
          disabled: false,
          handle: 'test/aaa'
        },
        {
          label: '不关联日期区间',
          prop: 'separateddaterange',
          type: 'separateddaterange',
          show: true,
          disabled: false
        },
        {
          label: '不关联日期时间区间',
          prop: 'separatedtimerange',
          type: 'separatedtimerange',
          show: true,
          disabled: false
        }
      ],
      handle: [
        {
          label: 'save',
          vaild: true,
          handle: 'kunkkaOnlyFormDialog/toggleSetModel',
          icon: 'el-icon-plus'
        },
        {
          label: '重置',
          handle: 'reset'
        }
      ],
      model: {
        name: '选项1',
        gonghao: '',
        zdy: []
      },
      rules: {
        name: [
          { required: true, trigger: 'change' }
        ],
        gonghao: [
          { required: true, trigger: 'change' }
        ]
      },
      conditions: [
        {
          label: '工号',
          prop: 'id',
          type: 'span',
          fixed: '',
          show: true,
          width: '200'
        },
        {
          label: '姓名',
          prop: 'name',
          type: 'span',
          fixed: '',
          show: true,
          width: '300'
        }
      ],
      plan: [
        {
          cStr2: '方案一'
        },
        {
          cStr2: '方案二'
        }
      ],
      size: 'small'
    }
  },
  mounted() {},
  methods: {
    toggleClick(data) {
      console.log(data)
    }
  }
}
</script>
<style lang="scss">
.Kunkka-collapse-form {
  .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
}
</style>
